<template>
  <!-- MemberRights 申请须知 -->
  <PageContainer>
    <view class="container">
      <Header title="申请须知" :is-box-shadow="false" />
      <view class="rich-text">
        <TRichText :content="content" />
      </view>
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          text="我已阅读并进行下一步"
          type="primary"
          customClass="br-50"
          @click="next"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  MemberRights  申请须知 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import TRichText from '@/components/TRichText/index.vue';
  import { redirectTo, onLoad } from '@/router';
  import { ref } from 'vue';
  import { byIdApplyExplain } from '@/api/membership';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { useUserStore } from '@/store/modules/user';
import { storeToRefs } from 'pinia';

  const id = ref();
  const content = ref('');
  const attachment = ref('');
  const { cocInfo } = storeToRefs(useUserStore());

  onLoad<'MemberRights'>((op) => {
    id.value = op.id;
    /** 临时优化, 解决高州校友会公众号文章中小程序链接配置错误的问题(李) */
    if (cocInfo.value) {
      redirectTo({ name: 'welcomeMember' })
    } else {
      byIdApplyExplain(op.id).then((r) => {
        content.value = r.applyExplain;
        attachment.value = r.applyAttachment;
      });
    }
  });

  function next() {
    redirectTo({
      name: 'membershipInfo',
      options: {
        id: id.value,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
  }
</style>
